﻿<div class="ui-widget-content">
    <h3>Progressbar</h3>
    <p>
        O progressbar é um componente útil para determinar o grau de evolução de uma tarefa,
        normalmente aplicado ao elemento div.
    </p>

    <p>Veja como é simples: $('#meu_progressbar1').progressbar({value:50});</p>
    <div id="meu_progressbar1"></div>

    <p>Você pode ainda <a href="#" onclick="javascript: $('#meu_progressbar2').progressbar('value', 70);">aumentar</a> ou <a href="#" onclick="javascript: $('#meu_progressbar2').progressbar('value', 30);">diminuir</a> o valor da progress bar:</p>
    <div id="meu_progressbar2"></div>

    <p>Podemos ainda anima-la: $('#meu_progressbar3 > .ui-progressbar-value').css('background-image', 'url(img/pbar-ani.gif)');</p>
    <div id="meu_progressbar3"></div>

    <script type="text/javascript">
        inicializador.progressbarInit = function() {
            $('#meu_progressbar1').progressbar({value:50});
            $('#meu_progressbar2').progressbar({value:30});

            $('#meu_progressbar3').progressbar({value:50});
            $('#meu_progressbar3 > .ui-progressbar-value').css('background-image', 'url(img/pbar-ani.gif)');
        };
    </script>
</div>
